<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head>









 
 
 
 
  

  




  
    
<meta http-equiv="content-type" content="text/html; charset=utf-8"><title>Gadgets API Reference - Gadgets - Google Code</title>

<script type="text/javascript">
(function(){function a(){this.t={};this.tick=function(c){this.t[c]=(new Date).getTime()};this.tick("start")}var b=new a;window.jstiming={Timer:a,load:b};if(window.external&&window.external.pageT)window.jstiming.pt=window.external.pageT;})();

var _tocPath_ = '/html/apis/gadgets/docs/_toc.ezt';
</script>
<link href="GoogleGadget_reference_files/codesite.css" type="text/css" rel="stylesheet">
<script src="GoogleGadget_reference_files/codesite.js" type="text/javascript"></script>
<link rel="search" type="application/opensearchdescription+xml" title="Google Code" href="http://code.google.com/osd.xml"><!--[if IE]><link rel="stylesheet" type="text/css" href="/css/iehacks.css" /><![endif]-->



  <link href="GoogleGadget_reference_files/local_extensions.css" rel="stylesheet" type="text/css">
  <link href="GoogleGadget_reference_files/semantic_headers.css" type="text/css" rel="stylesheet"></head><body class="gc-documentation">
    
    
    <div id="gc-container">
<a name="top"></a>
<div id="skipto">
  <a href="#gc-pagecontent-anchor">Skip to page content</a>
  <a href="#gc-toc-anchor">Skip to main navigation</a>
</div>
<div id="langpref">    
   <a style="text-decoration: none; cursor: pointer;" class="dropdown" href="http://code.google.com/"><span class="title1219980828968" style="text-decoration: underline;">English</span><span style="vertical-align: middle; text-decoration: none; font-family: arial,sans-serif; font-size: 11px;">&nbsp;▼</span></a>
   <span>|</span>
   <a href="http://code.google.com/more/">Site Directory</a>
</div>
<div id="gc-header">
  <div id="logo"><a href="http://code.google.com/">
  
     <img src="GoogleGadget_reference_files/cleardot.gif" alt="Google Code Home Page" id="gc-logo-img" height="1" width="1">
  
  </a></div>
  <div id="search">
    <div id="searchForm" class="searchForm" style="">
      <form action="" accept-charset="utf-8" class="gsc-search-box" onsubmit="executeGSearch(document.getElementById('gsearchInput').value); return false;">
        <table class="gsc-search-box" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td class="gsc-input">
                <input id="gsearchInput" name="q" maxlength="2048" class="gsc-input" autocomplete="off" title="Google Code Search" style="width: 345px;" type="text">
              </td>
              <td class="gsc-search-button">
                <div id="cs-searchresults" onclick="event.cancelBubble = true;"></div>
                <input title="Search" id="gsearchButton" class="gsc-search-button" value="Search" type="submit">
              </td>
            </tr>
            <tr>
              <td class="greytext">e.g. "ajax apis" or "open source"</td>
            </tr>
          </tbody>
        </table>
      </form>
    </div> <!-- end searchForm -->
    <div id="searchForm2" class="searchForm2" style="display: none;">
      <form id="cse" action="http://www.google.com/cse">
        <input name="cref" value="http://code.google.com/cse/googlecode-context.xml" type="hidden">
        <input name="q" maxlength="2048" autocomplete="off" title="Google Code Search" style="width: 345px;" type="text">
        <input name="sa" value="Search" title="Search" type="submit"><br>
        <div class="greytext">e.g. "ajax apis" or "open source"</div>
      </form>
    </div> <!-- end searchForm2 -->
  </div> <!-- end search -->
</div> <!-- end gc-header -->


<div id="codesiteContent">

<a name="gc-topnav-anchor"></a>
<div id="gc-topnav">
  <h1>Gadgets</h1>
  <ul id="docs" class="gc-topnav-tabs">

    <li id="home_link">
      <a href="http://code.google.com/apis/gadgets/" title="Gadgets home page">Home</a>
    </li>
  
    <li id="docs_link">
      <a href="http://code.google.com/apis/gadgets/devguide_landing.html" class="selected" title="Official Gadgets documentation">Docs</a>
    </li>
  
    <li id="faq_link">
      <a href="http://code.google.com/apis/gadgets/faq.html" title="Answers to frequently asked questions about Gadgets">FAQ</a>
    </li>
  
    <li>
      <a href="http://googlegadgetsapi.blogspot.com/" title="Official Gadgets blog">Blog</a>
    </li>
  
    <li>
      <a href="http://groups.google.com/group/Google-Gadgets-API" title="Gadgets developer forum">Group</a>
    </li>
  
    <li>
      <a href="http://code.google.com/apis/gadgets/docs/terms.html" title="Gadgets terms of service">Terms</a>
    </li>
  

  </ul>
</div> <!-- end gc-topnav -->

    <div class="g-section g-tpl-170">

      <a name="gc-toc-anchor"></a>  
      <div class="g-unit g-first" id="gc-toc">
        <ul class="treelist tlw-nested-only tlw-processed tlw-instance-0"> 
   <li><a href="http://www.google.com/ig/submit">Submit a Gadget</a></li>
    <li><a target="_blank" href="http://code.google.com/apis/gadgets/docs/legacy/gs.html#GGE">Google Gadgets Editor</a></li>
</ul>

<div class="line"></div>

<ul class="treelist tlw-nested-only tlw-processed tlw-instance-1">
<li>
  <h1 class="tlw-ignore">Gadgets API</h1>
  <ul>
    <li><a href="http://code.google.com/apis/gadgets/docs/overview.html">API Overview</a></li>
    <li style="padding-top: 0pt; padding-bottom: 0pt;">
      <div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control" title="Expand gadgets.* Developer's Guide"><img src="GoogleGadget_reference_files/cleardot.gif" alt="Expand gadgets.* Developer's Guide" class="tlw-control tlw-plus"></a><a href="http://code.google.com/apis/gadgets/docs/dev_guide.html">gadgets.* Developer's Guide</a></div><ul style="display: none;" id="1-sub-0">
        <li><a href="http://code.google.com/apis/gadgets/docs/gs.html">Getting Started</a></li>
        <li><a href="http://code.google.com/apis/gadgets/docs/basic.html">Writing Your Own Gadgets</a></li>
        <li><a href="http://code.google.com/apis/gadgets/docs/fundamentals.html">Development Fundamentals </a></li>
        <li><a href="http://code.google.com/apis/gadgets/docs/tools.html">Developer Tools</a></li>
        <li><a href="http://code.google.com/apis/gadgets/docs/ui.html">Creating a User Interface</a></li>
        <li><a href="http://code.google.com/apis/gadgets/docs/remote-content.html">Working with Remote Content</a></li>
        <li><a href="http://code.google.com/apis/gadgets/docs/i18n.html">Internationalization</a></li>
        <li><a href="http://code.google.com/apis/gadgets/docs/non-english.html">Non-English Gadgets</a></li>
        <li><a href="http://code.google.com/apis/gadgets/docs/publish.html">Publishing Your Gadget</a></li>
		<li><a href="http://code.google.com/apis/gadgets/docs/reference.html">XML Reference</a></li>
      </ul>
    </li>
    <li><a href="http://code.google.com/apis/gadgets/docs/reference/">gadgets.* API Reference</a></li>
  



<li style="padding-top: 0pt; padding-bottom: 0pt;">
      <div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control" title="Collapse Legacy Developer's Guide"><img src="GoogleGadget_reference_files/cleardot.gif" alt="Collapse Legacy Developer's Guide" class="tlw-control tlw-minus"></a><a href="http://code.google.com/apis/gadgets/docs/legacy/dev_guide.html">Legacy Developer's Guide</a></div><ul style="display: block;" id="1-sub-1">
        <li><a href="http://code.google.com/apis/gadgets/docs/legacy/gs.html">Getting Started</a></li>
        <li><a href="http://code.google.com/apis/gadgets/docs/legacy/basic.html">Writing Your Own Gadgets</a></li>
        <li><a href="http://code.google.com/apis/gadgets/docs/legacy/fundamentals.html">Development Fundamentals </a></li>
        <li><a href="http://code.google.com/apis/gadgets/docs/legacy/tools.html">Developer Tools</a></li>
        <li><a href="http://code.google.com/apis/gadgets/docs/legacy/ui.html">Creating a User Interface</a></li>
        <li><a href="http://code.google.com/apis/gadgets/docs/legacy/remote-content.html">Working with Remote Content</a></li>        
        <li><a href="http://code.google.com/apis/gadgets/docs/legacy/i18n.html">Internationalization</a></li>
        <li><a href="http://code.google.com/apis/gadgets/docs/legacy/non-english.html">Non-English Gadgets</a></li>
        <li><a href="http://code.google.com/apis/gadgets/docs/legacy/publish.html">Publishing Your Gadget</a></li>
		<li class="selected"><a href="http://code.google.com/apis/gadgets/docs/legacy/reference.html">API Reference</a></li>
      </ul>
    </li>
	
  </ul>  
<div class="line"></div>
<ul>
  <li style="padding-top: 0pt; padding-bottom: 0pt;">
    <div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control" title="Expand More Gadgets"><img src="GoogleGadget_reference_files/cleardot.gif" alt="Expand More Gadgets" class="tlw-control tlw-plus"></a><h2>More Gadgets</h2></div><ul style="display: none;" id="1-sub-2">
      <li><a style="text-decoration: none;" href="http://code.google.com/apis/visualization/"><span style="text-decoration: underline;">Visualization API</span><span class="new"> New!</span></a></li>
      <li><a style="text-decoration: none;" href="http://code.google.com/apis/opensocial/"><span style="text-decoration: underline;">Social Gadgets</span><span class="new"> New!</span></a></li>
      <li><a href="http://code.google.com/apis/desktop/">Desktop Gadget API</a></li>
      <li><a href="http://www.google.com/ig/directory?synd=open&amp;source=gapi">Browse Webpage Gadgets</a></li>
    </ul>
  </li>
</ul>


      </li></ul></div>
      
      <a name="gc-pagecontent-anchor"></a>   
      <div style="position: relative;" class="g-unit" id="gc-pagecontent"><ol class="cs-breadcrumbs"><li class="cs-crumb"><a href="http://code.google.com/apis/gadgets/devguide_landing.html" class="" title="Official Gadgets documentation">Docs</a><span class="cs-crumbSpacer">&nbsp;&gt;&nbsp;</span></li><li class="cs-crumb"><a href="http://code.google.com/apis/gadgets/docs/legacy/dev_guide.html">Legacy Developer's Guide</a><span class="cs-crumbSpacer">&nbsp;&gt;&nbsp;</span></li><li class="cs-crumb"><a href="http://code.google.com/apis/gadgets/docs/legacy/reference.html">API Reference</a></li></ol>
        <h1 class="page_title">Gadgets API Reference</h1>



<p>This is the reference for the "legacy" gadgets API, based on the <code>_IG_...</code> namespace. It includes reference
        information for the gadget spec XML, and for the JavaScript core
        and feature-specific libraries. </p> 

<p>Going forward, the gadgets API is being "renamespaced" into the <code>gadgets.*</code>
JavaScript namespace, to provide a cleaner API to program
against and support. Currently the new namespace is only supported in
containers that also support the OpenSocial API. If you are developing
gadgets for an OpenSocial container, see the <a href="http://code.google.com/apis/gadgets/dev_guide.html">gadgets.* Developers Guide</a>. You can see the gadgets.* reference  <a href="http://code.google.com/apis/gadgets/docs/reference/">here</a>. If you are interested in gaining a deeper understanding, you are also welcome to read the <a href="http://code.google.com/apis/gadgets/docs/spec.html">gadgets specification</a>. Keep in mind that the new <code>gadgets.*</code> API is NOT yet supported everywhere. Go <a href="http://code.google.com/apis/opensocial/gettingstarted.html">here</a> for a list of containers that support the <code>gadgets.*</code> API. </p>

    <h2>Contents</h2>
    <ol class="toc">
      <li><a href="#XML_Ref">XML Structure</a>

	    <ol class="toc">
          <li><a href="#Moduleprefs_Ref">Gadget Preferences</a></li>
	      <li><a href="#Userprefs_Ref">User Preferences</a></li>
	      <li><a href="#Content_Ref">Content Section</a></li>
	    </ol> 
      </li>
	  <li><a href="#JS_Ref">JavaScript Libraries</a>

	      <ol class="toc">
          <li><a href="#Core">Core JavaScript Library</a></li>
		  <li><a href="#Feature_Libs">Feature-Specific JavaScript Libraries</a></li>				    
        </ol> 
      </li>
	  <li><a href="#RequestParams_Ref">Request Parameters</a></li>  
	</ol>


   
              <h2><a name="XML_Ref" id="XML_Ref"></a>XML Structure</h2>
              <p>The following sections describe the structure and contents
                  of the XML file used to specify a gadget. </p>
              <h3><a name="Moduleprefs_Ref" id="Moduleprefs_Ref"></a> Gadget
                  Preferences</h3>
              <p>The <code>&lt;ModulePrefs&gt;</code> section
                  in the XML file specifies characteristics of the gadget,
                  such as title, author, preferred sizing, and so on. For
                  example:</p>
              <pre>&lt;Module&gt;<br>  &lt;ModulePrefs title="Developer Forum" 
    title_url="http://groups.google.com/group/Google-Gadgets-API" <br>    height="200" 
    author="Jane Smith" 
    author_email="xxx@google.com"/&gt; <br>  &lt;Content ...&gt;<br>   ... content ...<br>  &lt;/Content&gt; <br>&lt;/Module&gt;</pre>

              <p>The users of your gadget cannot change these attributes. </p>
              <p>The following table lists the <code>&lt;ModulePrefs&gt;</code> attributes:</p>
              <table>
                  <tbody><tr>
                      <th>Attribute</th>
                      <th>Description</th>

                  </tr>
                  <tr>
                      <td><code>title</code> </td>
                      <td>Optional string that provides the title of the
                          gadget. This title is displayed in the gadget
                          title bar on iGoogle.
                          If this string contains <a href="http://code.google.com/apis/gadgets/docs/legacy/basic.html#UP_MP">user
                          preference substitution variables</a> and you
                          are planning to submit your gadget to the 
                           content directory, you should also provide
                          a <code>directory_title</code> for
                          directory display. </td>

                  </tr>
                  <tr>
                      <td><code>directory_title</code> </td>
                      <td>Optional string that provides the title that
                          should be displayed for your gadget in the 
                           content directory. Should contain only
                          the literal text to be displayed, not <a href="http://code.google.com/apis/gadgets/docs/legacy/basic.html#UP_MP">user
                          preference substitution variables</a>. This is
                          because the content directory displays a static
                          view of your gadget, and therefore can't perform
                          the necessary substitution to produce a reasonable
                          title. For example, if your gadget's title is "Friends for
                          __UP_name__", the directory
                          is not able to perform the substitution to provide
                          a reasonable value for " __UP_name__".
                          So you might set your <code>directory_title</code> to
                          be simply "Friends".</td>

                  </tr>
                  <tr>
                      <td><code>title_url </code></td>
                      <td>Optional string that provides a URL that the
                          gadget title links to. For example, you could
                          link the title to a webpage related to the gadget. </td>
                  </tr>
                  <tr>
                      <td><code>description </code></td>

                      <td>Optional string that describes the gadget.</td>
                  </tr>
                  <tr>
                      <td><code>author </code></td>
                      <td>Optional string that lists the author of the
                          gadget. </td>
                  </tr>
                  <tr>

                      <td><code>author_email </code></td>
                      <td>Optional string that provides the gadget author's
                          email address. You can use any email system,
                          but you should not use a personal email address
                          because of spam. One approach is to use an email
                          address of the form <strong>helensmith.feedback+coolgadget@gmail.com</strong>                          in your gadget spec.
                          <br>
                          <br>
                          Gmail drops everything after the plus sign
                              (+), so this email address is interpreted
                              as <strong>helensmith.feedback@gmail.com</strong>.
                          <br><br>

                          
                          You can create a Gmail account <a href="http://mail.google.com/mail/signup">here</a>.</td>
                  </tr>
                  <tr>
                      <td><code>author_affiliation </code></td>
                      <td>Optional string such as "Google" that
                          indicates the author's affiliation. This attribute
                          is required for gadgets that are included in
                          the content directory. </td>

                  </tr>
                  <tr>
                      <td><code>author_location </code></td>
                      <td>The author's geographical location, such as "Mountain
                          View ,
                          CA, USA ".</td>
                  </tr>
                  <tr>
                      <td><code>screenshot </code></td>

                      <td>Optional string that gives the URL of a gadget
                          screenshot. This must be an image on a public
                          web site that is not blocked by <strong>robots.txt</strong>. PNG is the preferred format, though GIF and JPG are
                          also acceptable. Gadget screenshots should be
                          280 pixels wide. The height of the screenshot
                          should be the "natural" height of the
                          gadget when it's in use. For more discussion
                          of screenshot guidelines, see <a href="http://code.google.com/apis/gadgets/docs/legacy/publish.html#Submitting">Publishing
                          to the Content Directory</a>.</td>

                  </tr>
                  <tr>
                      <td><code>thumbnail</code></td>
                      <td>Optional string that gives the URL of a gadget
                          thumbnail. This must be an image on a public
                          web site that is not blocked by <strong>robots.txt</strong>. PNG is the preferred format, though GIF and JPG are
                          also acceptable. Gadget thumbnails should be
                          120x60 pixels. For more discussion of thumbnail
                          guidelines, see <a href="http://code.google.com/apis/gadgets/docs/legacy/publish.html#Submitting">Publishing
                          to the Content Directory</a>.</td>

                  </tr>
                  <tr>
                      <td><code>height </code></td>
                      <td>Optional positive integer that specifies the
                          height of the area in which the gadget runs.
                          The default height is 200. </td>
                  </tr>
                  <tr>
                      <td><code>width </code></td>

                      <td>Optional positive integer that specifies the
                          width of the area in which the gadget runs. This
                          setting only applies to <a href="http://code.google.com/apis/gadgets/docs/legacy/publish.html#Syndication">syndicated
                          gadgets</a>. The default width is 320. </td>
                  </tr>
                  <tr>
                      <td><code>scaling </code></td>
                      <td>Optional boolean that specifies whether the aspect
                          ratio (height-to-width ratio) of the gadget is
                          maintained when the browser is resized. Gadgets
                          that can automatically scale vertically should
                          set this to true, but gadgets which have a fixed
                          height should set this to false. The default
                          is true. </td>
                  </tr>

                  <tr>
                      <td><code>scrolling </code></td>
                      <td>Optional boolean that provides vertical and/or
                          horizontal scrollbars if the content exceeds
                          the space provided. If false, then the content
                          is clipped to the height and width provided (not
                          that width is not configurable). The default
                          is false. </td>
                  </tr>
                  <tr>
                      <td><code>singleton </code></td>
                      <td>Optional boolean that specifies whether users
                              can add a gadget multiple times from a directory.
                              The default is true, meaning that by default,
                              gadgets can only be added once. Directories
                              can handle this attribute however they choose.
                              For example, the   <a href="http://www.google.com/ig/directory">content
                              directory</a> handles <code>singleton="true"</code> by
                              graying out and displaying the text "Added" for
                              gadgets that have already been added. Note
                              that changes to this attribute may not be
                              picked up by directories right away.
                              <br>

                              <br>
                              This attribute doesn't prevent users from
                                  adding gadgets multiple times through
                                  the <a href="http://code.google.com/apis/gadgets/docs/legacy/tools.html#Dev_Gadget">developer
                                  gadget</a> or <a href="http://code.google.com/apis/gadgets/docs/legacy/gs.html#Writing_mods">Add
                                  by URL</a>.
                                  Consequently, you still need to write
                      your gadget to support multiple instances. </td>
                  </tr>
                  <tr>
                      <td><code>author_photo</code></td>

                      <td>For the <a href="http://google.com/ig/authors">authors
                                  page</a>, a URL to a photo (70x100 PNG
                                  format preferred, but JPG/GIF are also
                                  supported).</td>
                  </tr>
                  <tr>
                      <td><code>author_aboutme</code></td>
                      <td>For the <a href="http://google.com/ig/authors">authors
                              page</a>, a statement about yourself (try
                              to keep to ~500 characters).</td>

                  </tr>
                  <tr>
                      <td><code>author_link</code></td>
                      <td>For the <a href="http://google.com/ig/authors">authors
                              page</a>, a link to your website, blog, etc.</td>
                  </tr>
                  <tr>
                      <td><code>author_quote</code></td>

                      <td>For the <a href="http://google.com/ig/authors">authors
                              page</a>, a quote you'd like to include (try
                              to keep to ~300 characters).</td>
                  </tr>
        </tbody></table>
              <h4><a name="Require" id="Require"></a>Using Libraries</h4>
              <p>To use certain gadget API features, such as dynamic height
                  or storing state, you need to load the appropriate JavaScript
                  library using the <code>&lt;Require&gt;</code> tag
                  (inside
				    <code>&lt;ModulePrefs&gt;</code>). The <code>&lt;Require&gt;</code> tag
                  has one required attribute, <code>feature</code>,
                  whose value specifies the  feature library.
                  For example: </p>

              <pre>&lt;ModulePrefs 
  title="Set Userprefs Demo"&gt;
  &lt;Require feature="dynamic-height"/&gt;
  &lt;Require feature="setprefs" /&gt; 
&lt;/ModulePrefs&gt; </pre>
              <p>For more discussion of the feature libraries, see <a href="#Feature_Libs">Feature-Specific
                  JavaScript Libraries</a>. </p>

              <h4><a name="L10N_Ref" id="L10N_Ref"></a>Specifying Locales</h4>
              <p>You can use <code>&lt;Locale&gt;</code> tags
                  under <code>&lt;ModulePrefs&gt;</code> to
                  specify the locales supported by your gadget. You can
                  also use it to specify message bundles, as described
                  in <a href="http://code.google.com/apis/gadgets/docs/legacy/i18n.html">Internationalization</a>.</p>
              <p>For example, this snippet specifies two different locales: </p>

              <pre>&lt;ModulePrefs ...&gt;
  &lt;Locale lang="en" country="us" /&gt;
  &lt;Locale lang="ja" country="jp" /&gt;
&lt;/ModulePrefs&gt;</pre>
              <p>The "lang" (language) and "country" attributes
                  are both optional, but you must have at least one of
                  them for each <code>&lt;Locale&gt;</code>.
                  If you omit either attribute, the value is equivalent
                  to "*" and "ALL". If you specify
                  a country and no language, it is assumed that your gadget
                  supports all languages associated with the country. Likewise,
                  if you specify a language and no country, it is assumed
                  that your gadget supports all countries associated with
                  the language. </p>

              <p>You can find the acceptable values you for "lang" and "country" <a href="http://code.google.com/apis/gadgets/docs/legacy/i18n.html#Supported">here</a>.                  </p>
              <p>There are a few exceptions to the usual language rules:</p>
              <ul>
                  <li>Simplified Chinese:<code> lang="zh-cn"</code> (typically
                      for country="cn").</li>

                  <li>Traditional Chinese: <code>lang="zh-tw"</code> (typically
                      for country="tw" or "hk", Taiwan
                      or Hong Kong, respectively). </li>
              </ul>
              <p>The following table lists the <code>&lt;Locale&gt;</code> attributes:</p>

              <table>
                  <tbody><tr>
                      <th>Attribute</th>
                      <th>Description</th>
                  </tr>
                  <tr>
                      <td><code>lang </code></td>

                      <td>Optional string indicating the language associated
                          with the locale.</td>
                  </tr>
                  <tr>
                      <td><code>country </code></td>
                      <td>Optional string indicating the country associated
                          with the locale.</td>
                  </tr>
                  <tr>

                      <td><code>messages</code></td>
                      <td>Optional string that is a URL that points to
                          a message bundle. Message bundles are XML files
                          that contain the translated strings for a given
                          locale. For more information, see <a href="http://code.google.com/apis/gadgets/docs/legacy/i18n.html">Internationalization</a>.</td>
                  </tr>
                  <tr>
                      <td><code>language_direction</code></td>

                      <td>Optional string that sets the direction of the
                          gadget. Its value can either be "rtl" (right-to-left)
                          or "ltr" (left-to-right). The default
                          is "ltr". This
                          attribute lets you create gadgets that support
                          both left-to-right and right-to-left languages.
                          For more discussion of this topic, see <a href="http://code.google.com/apis/gadgets/docs/legacy/i18n.html#BIDI">Creating
                          Bi-directional Gadgets</a>. You can  use
                          the following substitution variables in conjunction
                          with <code>language_direction</code>: <br>
						  <ul>

						  <li><code>__BIDI_START_EDGE__</code>:  The value is "left" when
						      the gadget is in LTR-mode and "right" when the gadget
						      is in RTL-mode. </li>
						  <li><code>__BIDI_END_EDGE__</code>:  The
            value is "right" when the gadget is in LTR-mode and "left" when
            the gadget is in RTL-mode.</li>

						  <li><code>__BIDI_DIR__</code>: The value of this variable is "ltr" when
						      the gadget is in LTR-mode and "rtl" when the gadget
						      is in RTL-mode.</li>
						  <li><code>__BIDI_REVERSE_DIR__</code>: The value of this variable
						      is "rtl" when the gadget is in LTR-mode and "ltr" when
						      the gadget is in RTL-mode. </li>

						  </ul>
					  </td>
                  </tr>
              </tbody></table>
              <p>If you don't specify a <code>&lt;Locale&gt;</code>,
                  the default is assumed to be US + English only. </p>
              <h4><a name="MayRequire_Ref" id="MayRequire_Ref"></a>Specifying
                  Compatibility Requirements</h4>
              <p>Not all gadgets can run in all environments. A gadget
                  may require a particular browser or software. You can
                  use the <code>&lt;MayRequire&gt;</code> tag
                  to provide information about special requirements of
                  your gadget. For example:</p>

              <pre>&lt;ModulePrefs ...&gt;
  &lt;MayRequire type="plugin" value="quicktime"/&gt;
  &lt;MayRequire type="browser" value="firefox" min_version="1.06"/&gt;
  &lt;MayRequire type="platform" 
    value="windows"&gt; This gadget uses a Windows API.
  &lt;/MayRequire&gt;
&lt;/ModulePrefs&gt;</pre>
              <p>The following table lists the <code>&lt;MayRequire&gt;</code> attributes:</p>

              <table>
                  <tbody><tr>
                      <th>Attribute</th>
                      <th>Description</th>
                  </tr>
                  <tr>
                      <td><code>type </code></td>

                      <td>Required string indicating the type of requirement.
                          The supported types are <code>"platform</code>", <code>"browser"</code>,
                          and <code>"plugin"</code>.</td>
                  </tr>
                  <tr>
                      <td><code>value </code></td>
                      <td>Required string that provides a value for the
                          type. For example, <code>type="plugin" value="flash"</code>.</td>

                  </tr>
                  <tr>
                      <td><code>min_version </code></td>
                      <td>Optional string indicating the minimal version
                          number for the required item. </td>
                  </tr>
                  <tr>
                      <td><code>cdata </code></td>

                      <td>Optional string that provides additional information
                          about the requirement.</td>
                  </tr>
              </tbody></table>
              <h3><a name="Userprefs_Ref"></a>User Preferences </h3>
              <p>Some gadgets need to give users a way of supplying user-specific
                  information. For example, a weather gadget might require
                  users to provide their postal codes. The user preferences
                  (<code>&lt;UserPref&gt;</code>) section
                  in the XML file describes the user input fields that
                  are turned into user interface controls when the gadget
                  runs. </p>
              <p>The following table lists the <code>&lt;UserPref&gt;</code> attributes:</p>

              <table>
                  <tbody><tr>
                      <th>Attribute</th>
                      <th>Description</th>
                  </tr>
                  <tr>
                      <td><code>name </code></td>

                      <td>Required "symbolic" name of the user
                          preference; displayed to the user during editing
                          if no <code>display_name</code> is defined.
                          Must contain only letters, number and underscores,
                          i.e. the regular expression ^[a-zA-Z0-9_]+$.
                          Must be unique.</td>
                  </tr>
                  <tr>
                      <td><code>display_name </code></td>

                      <td>Optional string to display alongside the user
                          preferences in the edit window. Must be unique. </td>
                  </tr>
                  <tr>
                      <td><code>urlparam </code></td>
                      <td>Optional string to pass as the parameter name
                          for content <code>type="url"</code>.</td>
                  </tr>

                  <tr>
                      <td><code>datatype </code></td>
                      <td>Optional string that indicates the data type
                          of this attribute. Can be <code>string</code>, <code>bool</code>, <code><a href="#Enums">enum</a></code>, <code>hidden</code> (a
                          string that is not visible or user editable), <code><a href="http://code.google.com/apis/gadgets/docs/legacy/fundamentals.html#list">list</a></code> (dynamic
                          array generated from user input), or <code><a href="http://code.google.com/apis/gadgets/docs/legacy/fundamentals.html#location">location</a></code> (for
                          gadgets based on Google Maps). The default is <code>string</code>.                          </td>

                  </tr>
                  <tr>
                      <td><code>required</code> </td>
                      <td>Optional boolean argument (<code>true</code> or <code>false</code>)
                          indicating whether this user preference is required.
                          The default is <code>false</code>. </td>

                  </tr>
                  <tr>
                      <td><code>default_value </code></td>
                      <td>Optional string that indicates a user preference's
                          default value.</td>
                  </tr>
              </tbody></table>
              <p>User preferences can be accessed from your gadget using
                  the user preferences <a href="#JS_Ref">JavaScript API</a>,
                  for example:</p>

              
              <pre>&lt;script type="text/javascript"&gt;
   var prefs = new _IG_Prefs();
   var someStringPref = prefs.getString("StringPrefName");
   var someIntPref = prefs.getInt("IntPrefName");
   var someBoolPref = prefs.getBool("BoolPrefName");
&lt;/script&gt;</pre>
              
              <h4><a name="Enums"></a>Enum Data Types</h4>
              <p>One of the values you can specify for the <code>&lt;UserPref&gt;</code> <code>datatype</code> attribute
                  is <code>enum</code>. The <code>enum</code> data
                  type is presented in the user interface as a menu of
                  choices. You specify the contents of the menu using <code>&lt;EnumValue&gt;</code>.</p>

              <p>For example, this <code>&lt;UserPref&gt;</code> lets
                  users set the level of difficulty for a game. Each value
                  that will appear in the menu (Easy, Medium, and Hard)
                  is defined using an <code>&lt;EnumValue&gt;</code> tag. </p>
              <pre>&lt;UserPref name="difficulty" 
     display_name="Difficulty"
     datatype="enum"
     default_value="4"&gt;
  &lt;EnumValue value="3" display_value="Easy"/&gt;
  &lt;EnumValue value="4" display_value="Medium"/&gt;
  &lt;EnumValue value="5" display_value="Hard"/&gt;
&lt;/UserPref&gt;</pre>
              <p>The following table lists the <code>&lt;EnumValue&gt;</code> attributes:</p>
              <table>

                  <tbody><tr>
                      <th>Attribute</th>
                      <th>Description</th>
                  </tr>
                  <tr>
                      <td><code>value </code></td>
                      <td>Required string that provides a unique value.
                          This value is displayed in the menu in the user
                          preferences edit box unless a <code>display_value</code> is
                          provided. </td>

                  </tr>
                  <tr>
                      <td><code>display_value </code></td>
                      <td>Optional string that is displayed in the menu
                          in the user preferences edit box. If you do not
                          specify a <code>display_value</code>,
                          the <code>value</code> is
                          displayed in the user interface.</td>
                  </tr>

              </tbody></table>
              <h3><a name="Content_Ref" id="Content_Ref"></a>Content Section </h3>
              <p>The <code>&lt;Content&gt;</code> section
                  defines the type of content, and either holds the content
                  itself or has a reference to external content. The <code>&lt;Content&gt;</code> section
                  is where the gadget attributes and user preferences are
                  combined with programming logic and formatting information
                  to become a running gadget. For more discussion on content
                  types, see <a href="http://code.google.com/apis/gadgets/docs/legacy/fundamentals.html#Content_Type">Choosing
                  a Content Type</a>. </p>
              <p>The following table lists the <code>&lt;Content&gt;</code> attributes:</p>

              <table>
                  <tbody><tr>
                      <th>Attribute</th>
                      <th>Description</th>
                  </tr>
                  <tr>
                      <td><code>type </code></td>

                      <td>Optional string that gives the type of the content.
                          The possible values are <code>html</code> 
                          and  <code>url</code>.
                          The default is <code>html</code>.</td>
                  </tr>
                  <tr>
                      <td><code>href </code></td>

                      <td>String that provides a destination URL. Required
                          for <code>type="url"</code>, and not allowed for
                          other content types. </td>
                  </tr>
                  <tr>
                      <td><code>cdata </code></td>
                      <td>Optional string. For HTML, contains the raw HTML
                          to render in the iframe.</td>
                  </tr>

              </tbody></table>
              <h2><a name="JS_Ref" id="JS_Ref"></a>JavaScript Libraries </h2>
              <p>This section describes the JavaScript functions supported
                  by the gadgets API. For a discussion of the requirements
                  of using the JavaScript libraries, see <a href="http://code.google.com/apis/gadgets/docs/legacy/fundamentals.html#Libs">Using
                  the JavaScript Libraries with Different Content Types</a>.</p>
              <p>There are two different types of JavaScript libraries
                  in the gadgets API:</p>

              <ul>
                  <li><a href="#Core">Core JavaScript library</a></li>
                  <li><a href="#Feature_Libs">Feature-specific JavaScript libraries</a></li>
              </ul>
              <h3><a name="Core"></a>Core JavaScript Library</h3>
              <p>The core JavaScript library includes general functions
                  that aren't related to a specific <a href="#Feature_Libs">feature</a>. </p>

              <p>This table lists the userprefs constructor, and the functions
                  you can call on a userprefs object once you have instantiated
                  it:</p>
              <table>
                  <tbody><tr>
                      <th>Name</th>
                      <th>Description</th>
                  </tr>
                  <tr>

                      <td><code>_IG_Prefs() </code></td>
                      <td>The user preferences constructor. For example:<br><br>
                          <code>var prefs
                          = new _IG_Prefs();</code></td>

                  </tr>
                  <tr>
                      <td><code>getString(userpref) </code></td>
                      <td>Retrieves the specified <code>userpref</code> as
                          a String value. For a userpref that has a <a href="http://code.google.com/apis/gadgets/docs/legacy/fundamentals.html#list"><code>list</code></a> data
                      type, retrieves the contents of the array as a single
                          string of pipe-delimited values.</td>
                  </tr>

                  <tr>
                      <td><code>getInt(userpref) </code></td>
                      <td>Retrieves the specified <code>userpref</code> as
                      an Integer value.</td>
                  </tr>
                  <tr>
                      <td><code>getBool(userpref) </code></td>

                      <td>Retrieves the specified <code>userpref</code> as
                      a Boolean value. </td>
                  </tr>
                  <tr>
                      <td><code>getArray(userpref)</code></td>
                      <td>For a <code>userpref</code> that
                          has a <a href="http://code.google.com/apis/gadgets/docs/legacy/fundamentals.html#list"><code>list</code></a> data
                          type, retrieves the contents as an array. </td>

                  </tr>
                  <tr>
                      <td><code>set(userpref, value)</code></td>
                      <td>Sets the <code>value</code> for
                          the specified <code>userpref</code>. To use this function
                          you must include the <code>setprefs</code> library
                          in your gadget, as described in <a href="#Ref_Setprefs">Setprefs
                          Library</a>. For more discussion of this function
                          and an example, see <a href="http://code.google.com/apis/gadgets/docs/legacy/fundamentals.html#SetPrefs">Saving
                          State</a>.</td>

                  </tr>
                  <tr>
                      <td><code>setArray(userpref, [value...])</code></td>
                      <td>For a <code>userpref</code> that
                          has a <a href="http://code.google.com/apis/gadgets/docs/legacy/fundamentals.html#list"><code>list</code></a> data
                          type, adds elements to the array. To use this
                          function you must include the <code>setprefs</code> library
                          in your gadget, as described in <a href="#Ref_Setprefs">Setprefs
                          Library</a>. For more discussion of this function,
                          see <a href="http://code.google.com/apis/gadgets/docs/legacy/fundamentals.html#list">Using
                          the list Data Type </a>. Example:<br>

                          <br> 
                      <code>prefs.setArray("mylist", ["Apples","Oranges"]);</code></td>
                  </tr>
                  
                  <tr>
                      <td><code>dump() </code></td>
                      <td>For debugging, uses <code>document.writeln()</code> to display
                          all of the available preferences.</td>

                  </tr>
              </tbody></table>
              <p>This table lists the general purpose JavaScript methods
                  that aren't specifically related to userprefs: </p>
              <table>
                  <tbody><tr>
                      <th>Name</th>
                      <th>Description</th>

                  </tr>
                  <tr>
                      <td><code>_IG_FetchContent(url,
                      func, {refreshInterval:num})</code></td>
                      <td>Fetches the content at <code>url</code>.
                          When it's ready, calls <code>func</code>.
                          Note that <code>_IG_FetchContent()</code>                          is
                              asynchronous, meaning that it returns immediately
                              and then calls the inner function later,
                              when the fetch finishes. This means that
                              you must put any dependent code inside the
                              callback function, or inside functions called
                              by the callback function. The optional <a href="http://code.google.com/apis/gadgets/docs/legacy/remote-content.html#Params"><code>refreshInterval</code></a>                          parameter
                              lets you override the default caching behavior
                              by refreshing the cache every <code>num</code> seconds. <br>

                              <br>
                              For more discussion of this function,
                                  see <a href="http://code.google.com/apis/gadgets/docs/legacy/remote-content.html#Fetch_text">Working
                      with Text</a>.</td>
                  </tr>
                  <tr>
                      <td><code>_IG_FetchXmlContent(url,
                      func, {refreshInterval:num})</code></td>
                      <td>Fetches the XML content at <code>url</code>. When it's
                              ready, calls <code>func</code>.
                              The optional <a href="http://code.google.com/apis/gadgets/docs/legacy/remote-content.html#Params"><code>refreshInterval</code></a> parameter
                              lets you override the default caching behavior
                              by refreshing the cache every <code>num</code> seconds. <br>

                              <br>
							  Like <code>_IG_FetchContent()</code>, is asynchronous.<br> 
							  <br>
                              For more discussion of this function,
                                  see <a href="http://code.google.com/apis/gadgets/docs/legacy/remote-content.html#Fetch_XML">Working
                      with XML</a>. </td>
                  </tr>
                  <tr>

                      <td><code>_IG_FetchFeedAsJSON(url,
                      func, num_entries, get_summaries)</code></td>
                      <td>Fetches the RSS / Atom feed content at <code>url</code>                          and
                          returns it as a <a href="http://www.json.org/">JSON</a> object.
                              When it's ready, calls <code>func</code>.
                              Fetches the number of feed entries specified
                              by <code>num_entries</code>                          (default
                              is 3, possible range is 1-100), and optionally
                              fetches entry summaries depending on the
                              value of <code>get_summaries</code> (default
                              is false).
                          <br>

                              <br>Like <code>_IG_FetchContent()</code>, is asynchronous.
                          <br>
                          <br>
                          For more discussion of this function, see <a href="http://code.google.com/apis/gadgets/docs/legacy/remote-content.html#Fetch_JSON">Working
                      with Feeds</a>.</td>
                  </tr>
                  <tr>
                      <td><code>_IG_RegisterOnloadHandler(func)</code></td>

                      <td>Event handler that gets called on load. Takes
                              a single argument, which is a function that
                              is called after the gadget loads. The passed
                              function takes no arguments.  
                      
                      </td>
                  </tr>
                  <tr>
                      <td><code>_gel(id)</code></td>
                      <td>A wrapper around the JavaScript <code>document.getElementById()</code>                          function. </td>

                  </tr>
				   <tr>
                      <td><code>_gelstn(tagname)</code></td>
                      <td>A wrapper around the JavaScript <code>document.getElementsByTagName()</code>                          function.</td>
                  </tr>
                  <tr>

                      <td><code>_esc(str) </code></td>
                      <td>A wrapper around the JavaScript <code>escape()</code> and
                              <code>encodeURIComponent()</code> functions.</td>
                  </tr>
                  <tr>
                      <td><code>_unesc(str) </code></td>

                      <td>A wrapper around the JavaScript <code>unescape()</code> and
                          <code>decodeURIComponent()</code> functions.</td>
                  </tr>
                  <tr>
                      <td><code>_trim(str)</code></td>
                      <td>Trims whitespace from the beginning and end of
                          <code>str</code>. </td>

                  </tr>
                 
                  <tr>
                      <td><code>_uc(str)</code></td>
                      <td>Returns an uppercase version of <code>str</code>.</td>
                  </tr>
                  <tr>
                      <td><code>_min(val1, val2)</code></td>

                      <td>Returns the lesser value of <code>val1</code> and <code>val2</code>, or
                          <code>val2</code> if they are equal.</td>
                  </tr>
                  <tr>
                      <td><code>_max(val1, val2)</code></td>

                      <td>Returns the greater value of <code>val1</code> and <code>val2</code>,
                          or <code>val2</code> if they
                      are equal.</td>
                  </tr>
                  <tr>
                      <td><code>_hesc(str)</code></td>

                      <td>Returns the HTML string <code>str</code> with
                          the following characters escaped: <code>&lt;&gt;'"</code></td>
                  </tr>
                  <tr>
                      <td><code>_args()</code></td>
                    <td>Returns the URL parameter key-value pairs
                              from document.location as an associative
                              array. So, for example, <code>"&amp;foo=bar&amp;up_cats=meow"</code> would
                              be returned as <code>{"foo":"bar", "up_cats":"meow"}</code>.
                              Here is an example of how you might use it
                              to fetch the language or country: 
                              <br>

                              <br>
                            <code>var
                              lang = _args()["lang"];<br>
                              if (typeof lang == "undefined")
                                  {<br>
&nbsp;&nbsp;lang = "en";<br>
                                  }

                                  
                      </code>                      </td>
                  </tr>
                  <tr>
                      <td><code>_toggle(element)</code></td>
                      <td>Toggles between showing and hiding an HTML <code>element</code>.</td>
                  </tr>

                  <tr>
                      <td><a name="Ref_Cache" id="Ref_Cache"></a><code>_IG_GetImage(url,
                      {refreshInterval:num})</code></td>
                      <td>Returns the cached version of the image specified
                          by <code>url</code>. This can improve performance
                          in gadgets that have static images. For example: <br> <br>
                          <code>var img = _IG_GetImage(my_image_url);</code><br><br>
                          The optional <a href="http://code.google.com/apis/gadgets/docs/legacy/remote-content.html#Params"><code>refreshInterval</code></a> parameter
                          lets you override the default caching behavior
                          by refreshing the cache every <code>num</code> seconds. <br>

                              <br>
						   The
						  functions <code>_IG_GetImageUrl()</code> and
						  <code>_IG_GetCachedUrl()</code> also give you
						  access to cached content. For more discussion
						  of this topic, see <a href="http://code.google.com/apis/gadgets/docs/legacy/publish.html#Hi_Volume">Improving Gadget
						  Performance</a>.</td>
                  </tr>
                  
                  <tr>

                      <td><code>_IG_GetCachedUrl(url, {refreshInterval:num})</code></td>
                      <td>Returns the proxy URL for the cached version
                          of the file specified by <code>url</code>.
                          Using cached content can improve gadget performance. 
						  <br>
						  The optional <a href="http://code.google.com/apis/gadgets/docs/legacy/remote-content.html#Params"><code>refreshInterval</code></a> parameter
						  lets you override the default caching behavior by refreshing the
						  cache every <code>num</code> seconds. </td>

                  </tr>
              </tbody></table>
              <h3><a name="Feature_Libs"></a>Feature-Specific JavaScript
                  Libraries</h3>
              <p>The gadgets API includes the following feature
                  libraries:</p>
              <ul>
                  <li><a href="#Ref_Setprefs">setprefs</a></li>

                  <li><a href="#Ref_DynHeight">dynamic-height</a></li>
                  <li><a href="#Ref_Settitle">settitle</a></li>
                  <li><a href="#Ref_Tabs">tabs</a></li>
                  <li><a href="#Ref_Drag">drag</a></li>
                  <li><a href="#Ref_Grid">grid</a></li>
                  <li><a href="#Ref_Mini">minimessage</a></li>

                  <li><a href="#Ref_Analytics">analytics</a></li>
                  <li><a href="#Ref_Flash">flash</a></li>
                  <li><a href="#Ref_Finance">finance</a></li>
                  <li><a href="#lockeddomain">locked-domain</a></li>
        </ul>
				<p>To use a particular feature library, you include it in your
				    gadget spec using the <code>&lt;Require&gt;</code> tag
				    (inside
				    <code>&lt;ModulePrefs&gt;</code>). For example: </p>

              <pre>&lt;ModulePrefs 
  title="My Tabbed Gadget"&gt;
  &lt;Require feature="tabs"/&gt;
&lt;/ModulePrefs&gt; </pre>
<p>The feature libraries are described in more detail below.</p>
                <h4><a name="Ref_Setprefs"></a>setprefs Library</h4>
                <p>For a detailed discussion of using the <code>setprefs</code> library
                  and examples, see <a href="http://code.google.com/apis/gadgets/docs/legacy/fundamentals.html#SetPrefs">Saving
                  State</a>.</p>
                <p>To use the <code>setprefs</code> library, gadgets must include the
                  following line under <code>&lt;ModulePrefs&gt;</code>:</p>
              <pre>&lt;Require feature="setprefs"/&gt;</pre>

			  <p>The <code>setprefs</code> library includes the following function:</p>
			  <pre>set(userpref, value)</pre>
			  <p>This function is called on a (typically hidden) userprefs object.
			      The <code>userpref</code> parameter specifies
			      the name of the user preference, and the <code>value</code> parameter
			      specifies the value that is being assigned to the user
			      preference. For example:</p>

			  <pre>var prefs = new _IG_Prefs();
prefs.set("score", 5000);			  </pre>
			  
			  <h4><a name="Ref_DynHeight"></a>dynamic-height Library</h4>
			  <p>For a detailed discussion of using the <code>dynamic-height</code>                  library and examples, see <a href="http://code.google.com/apis/gadgets/docs/legacy/ui.html#Dyn_Height">Managing
                  Gadget Height</a>.</p>

              <p>To use the <code>dynamic-height</code> library, gadgets must include
                  the following line under <code>&lt;ModulePrefs&gt;</code>:</p>
              <pre>&lt;Require feature="dynamic-height" /&gt; </pre>
			  <p>The <code>dynamic-height</code> library includes one function, which tells the
			      gadget to resize itself: </p>

	    <pre>_IG_AdjustIFrameHeight()</pre>
			  <h4><a name="Ref_Settitle" id="Ref_Settitle"></a>settitle Library </h4>
			  <p>For a detailed discussion of using the <code>settitle</code> library
			      and examples, see <a href="http://code.google.com/apis/gadgets/docs/legacy/ui.html#Settitle">Setting a Gadget's
			      Title</a>.
			  </p><p>To use the <code>settitle</code> library,
        gadgets must include the following line under <code>&lt;ModulePrefs&gt;</code>:
			  

			  </p><pre>&lt;Require feature="settitle" /&gt; </pre>
			  
              <p>The <code>settitle</code> library includes
                  the following constructors:        </p>
              <table border="0" width="1028">

                  <tbody><tr>
                      <th scope="col" width="287">Function</th>
                      <th scope="col" width="729">Description</th>
                  </tr>
                  <tr>
                      <td><code>_IG_SetTitle(title)</code></td>
                      <td>Changes a gadget's title to <code>title</code>. </td>

                  </tr>
                  
              </tbody></table>
			  <h4><a name="Ref_Tabs"></a>tabs Library</h4>
			  <p>For a detailed discussion of using the <code>tabs</code> library and
                examples, see <a href="http://code.google.com/apis/gadgets/docs/legacy/ui.html#Tabs">Tabs</a>.</p>

              <p>To use the <code>tabs</code> library, gadgets must include the following
                line under <code>&lt;ModulePrefs&gt;</code>:</p>
        <pre>&lt;Require feature="tabs" /&gt; </pre>
              <p><a name="Ref_tabs_obj" id="Ref_tabs_obj"></a>This table
                  lists the <code>tabs</code> constructor,
                  and the functions you can call on a tabs object once
                  you have instantiated it. A tabs object is the parent
                  container that holds an array of individual <a href="#Ref_tab_obj">tab
                  objects</a>.</p>

              <table>
                  <tbody><tr>
                      <th width="252">Function</th>
                      <th width="735">Description</th>
                  </tr>
                  <tr>
                      <td><code>_IG_Tabs(module_id,
                              opt_selected_tab, opt_container) </code></td>

                      <td>The constructor that instantiates a new instance
                          of the tabs object,
                          which represents a set of tabs. The first parameter
                          is the <code>__MODULE_ID__</code> of
                          the gadget. The optional parameter <code>opt_selected_tab</code> is
                          the name of the tab that is selected by default
                          the first time the gadget loads. If this parameter
                          is omitted, the first tab is selected by default.
                          The optional parameter <code>opt_container</code>  specifies
                          an HTML element
                          to contain the tabs. If omitted,  a
                          new HTML element is created and inserted at the
                          very top. This parameter lets you control where
                          the tabs appear in your gadget. </td>
                  </tr>
                  <tr>
                      <td><code>addTab(tabName, opt_params)</code> </td>

                      <td>Adds a new tab based on the name-value pairs
                          specified in <code>opt_params</code>. You can
                          specify the following parameters: <br>
                                          <ul>
                                              <li><strong>contentContainer</strong>:
                                                  Specifies an existing
                                                  HTML element to be used
                                                  as the tab content container.
                                                  If the <code>&lt;div&gt;</code> doesn't
                                                  exist, the <code>tabs</code> library
                                                  creates one.</li>

                                              <li><strong>callback</strong>:
                                                  Specifies a callback
                                                  function to be executed
                                                  whenever the tab is selected. </li>
                                              <li><strong>tooltip</strong>:
                                                  Adds a tooltip description
                                                  to the tab. When users
                                                  mouseover the tab, the
                                                  tooltip description pops
                                                  up. </li>
                                              <li><strong>index</strong>:
                                                  The index at which to
                                                  insert this tab. If omitted,
                                                  the tab is appended to
                                                  the end by default.</li>
                                          </ul>
                          <br>
                          For example: <br>

                          
                          <pre>tabs.addTab("Tab", { <br>     contentContainer: _gel("domId"),<br>     callback: func, <br>     tooltip: "Popup description" 
}); </pre></td>
                  </tr>

                  <tr>
                      <td><code>addTab(tabName,
                              opt_domId, opt_callback) </code></td>
                      <td>Adds a tab to the tabs object
                          and returns the DOM ID of the tab's associated <code>&lt;div&gt;</code>.
                          If the <code>&lt;div&gt;</code> doesn't
                          exist, the <code>tabs</code> library
                          creates one. The <code>tabName</code> parameter
                          gives the display name of the tab. The optional
                          parameter <code>opt_domId</code> provides
                          the DOM ID of the <code>&lt;div&gt;</code> holding
                          content for this tab. The optional <code>opt_callback</code> parameter
                          specifies a callback function that is fired each
                          time this tab is selected. </td>

                  </tr>
                  <tr>
                      <td><code>addDynamicTab(tabName,
                              callback)</code></td>
                      <td>Adds to the tabs object
                          a tab whose dynamic content is provided by a <code>callback</code> function.
                          Creates an empty <code>&lt;div&gt;</code> and
                          returns its DOM ID. The <code>&lt;div&gt;</code>'s
                          content must be dynamically generated from within
                          the <code>callback</code> function.
                          The <code>tabName</code> parameter
                          specifies the display name of the tab. The <code>callback</code> parameter
                          specifies the <code>callback</code> function
                          that is called each time this tab is selected. </td>

                  </tr>
                  <tr>
                      <td><code>getSelectedTab()</code> </td>
                      <td>Returns a <a href="#Ref_tab_obj">tab object</a> for the currently selected
                          tab.</td>
                  </tr>
                  <tr>

                      <td><code>setSelectedTab(tabIndex) </code></td>
                      <td>Selects the tab specified by <code>tabIndex</code> and
                          fires the tab's callback function if it exists.
                          If the tab is already selected, then the callback
                          is ignored. Tabs are indexed starting from 0.
                          Index is dependent on position If you change
                          a tab's position relative to other tabs, its
                          index changes accordingly. </td>
                  </tr>
                  <tr>
                      <td><code>moveTab(tabIndex1,
                              tabIndex2)</code></td>
                      <td>Swaps the positions of the tabs at <code>tabIndex1</code> and <code>tabIndex2</code>.
                          The selected tab does not change and no callback
                          functions are called. </td>

                  </tr>
                  <tr>
                      <td>r<code>emoveTab(tabIndex)</code></td>
                      <td>Removes the tab at <code>tabIndex</code> and
                          all of its associated content.</td>
                  </tr>
                  <tr>

                      <td><code>getTabs()</code></td>
                      <td>Returns an array of <a href="#Ref_tab_obj">tab
                              objects</a> that includes
                          all existing tabs.</td>
                  </tr>
                  <tr>
                      <td><code>alignTabs(align, opt_offset)</code></td>
                      <td>Sets how tabs are aligned in the HTML table that
                          contains them. Tabs are center-aligned by default.
                          The parameter <code>align</code> is a string
                          whose value must be one of the following (case-sensitive): <code>left,
                          center, right</code> <br>

                          The parameter <code>opt_offset</code> is a number, and it
                          only applies when the tab is left or right aligned.
                          It represents the number of pixels to offset
                          tabs from the left or right edge. The default
                          is 3px.</td>
                  </tr>
                  <tr>
                      <td><code>displayTabs(display)</code></td>
                      <td>Shows or hides tabs and all associated content. <br>
                          The display parameter is a boolean: <code>true</code> to
                          show tabs and <code>false</code> to hide tabs.</td>

                  </tr>
                  <tr>
                      <td><code>getHeaderContainer()</code></td>
                      <td>Returns the tab headers HTML container element. </td>
                  </tr>
              </tbody></table>
              <p><a name="Ref_tab_obj" id="Ref_tab_obj"></a>This table lists the functions you can call on a individual tab
			      object.</p>

			  <table>
                  <tbody><tr>
                      <th>Function</th>
                      <th>Description</th>
                  </tr>
                  <tr>
                      <td><code>getName()</code></td>

                      <td>Returns the display name of the tab as a string
                      (may contain HTML).</td>
                  </tr>
                  <tr>
                      <td><code>getNameContainer() </code></td>
                      <td>Returns the HTML element that contains the tab's
                      name/label within the tab's header.</td>
                  </tr>
                  <tr>

                      <td><code>getContentContainer()</code></td>
                      <td> Returns the HTML element container where tab
                      content is rendered. </td>
                  </tr>
                  <tr>
                      <td><code>getCallback()</code></td>
                      <td>Returns the  JavaScript callback function that
                      is executed every time the tab is selected.</td>

                  </tr>
                  <tr>
                      <td><code>getIndex()</code></td>
                      <td>Returns the tab's index </td>
                  </tr>
              </tbody></table>
			  
			  <h4><a name="Ref_Drag"></a>drag Library</h4>
			  <p>For a detailed discussion of using the <code>drag</code> library and
                  examples, see <a href="http://code.google.com/apis/gadgets/docs/legacy/ui.html#Drag">Drag</a>.</p>
              <p>To use the <code>drag</code> library, gadgets must include the following
                  line under <code>&lt;ModulePrefs&gt;</code>:</p>
              <pre>&lt;Require feature="drag" /&gt; </pre>

              <p>The <code>drag</code> library includes the following callback functions:</p>
              <table>
                  <tbody><tr>
                      <th>Callback Function </th>
                      <th>Description</th>
                  </tr>

                  <tr>
                      <td><code> onDragStart = function(newSource) {} </code></td>
                      <td>Called when dragging starts.</td>
                  </tr>
                  <tr>
                      <td><code>onDragTargetHit = function(newTarget, lastTarget)
                          {} </code></td>
                      <td> Called when dragging is under way and a target
                          has been hit. </td>

                  </tr>
                  <tr>
                      <td><code> onDragTargetLost = function(lastTarget) {} </code></td>
                      <td> Called when dragging is under way and the user
                          is no longer on a target. </td>
                  </tr>
                  <tr>
                      <td><code> onDragEnd = function(source, target) {} </code></td>

                      <td> Called when dragging has ended (the user has
                          let go of the mouse button).</td>
                  </tr>
                  <tr>
                      <td><code>onDragClick = function(source) {} </code></td>
                      <td> Called when the user never moved the mouse,
                          but had a mouse down and mouse up on a source.</td>
                  </tr>

              </tbody></table>
              <p>This table lists the <code>drag</code> constructor, and the functions
                  you can call on a <code>drag</code> object once you have instantiated
                it. Sources and targets are HTML elements that have associated
                  DOM ID's. Sources and targets also have drag ID's. If
                  no drag ID is specified, the drag library uses the DOM
                  ID as the drag ID. </p>
              <table>
                  <tbody><tr>
                      <th>Function</th>

                      <th>Description</th>
                  </tr>
                  <tr>
                      <td><code>_IG_Drag()</code></td>
                      <td>The <code>drag</code> constructor. Instantiates a <code>drag</code> object
                          to which you can  add sources and targets. </td>

                  </tr>
                  <tr>
                      <td><code>addSource(DOM_id) </code></td>
                      <td>Adds a source to the <code>drag</code> object, where <code>DOM_id</code>                          is the unique identifier for the <a href="http://developer.mozilla.org/en/docs/DOM:element">HTML
                              element</a> being added as a source. If you
                              don't specify a drag ID, the drag library
                              uses the HTML element's DOM ID as the drag
                              ID. For example:<br>

                              <br>
                      <code>drag_obj.addSource("dom_id1");</code></td>
                  </tr>
                  <tr>
                      <td><code>addSource(drag_id, HTML_element)</code></td>
                      <td>Adds <code>HTML_element</code> as a source to the <code>drag</code> object. Assigns the source a <code>drag_id</code>. For
                              example:
                              <br>

                              <br>
                              <code>drag_obj.addSource("first",
                      _gel("dom_id1"));</code></td>
                  </tr>
                  <tr>
                      <td><code>addSource(drag_id, HTML_element, surrogate)</code></td>
                      <td>Adds <code>HTML_element</code> as a source to the <code>drag</code> object. Assigns the source a <code>drag_id</code>. This
                              function also includes a <code>surrogate</code> parameter
                              that specifies the HTML markup you want to
                              use for the surrogate. The <code>surrogate</code> is a
                              blank object that impersonates the source
                              when the user is in mid-drag. By default,
                              the <code>surrogate</code> is a clone of the source. 
                              For example:<br>

                              <br>
                              <code>drag_obj.addSource("first", _gel("dom_id1"), "&lt;b&gt;This
                      is my surrogate&lt;/b&gt;");</code></td>
                  </tr>
                  <tr>

                      <td><code>removeSource(drag_id)                      </code></td>
                      <td>Removes the source specified by <code>drag_id</code>. </td>
                  </tr>
                  <tr>
                      <td><code>removeAllSources()</code></td>
                      <td>Removes all sources from the <code>drag</code> object. </td>

                  </tr>
                  <tr>
                      <td><code>addTarget(DOM_id)</code></td>
                      <td>Adds a target to the <code>drag</code> object, where <code>DOM_id</code>                          is the unique identifier for the <a href="http://developer.mozilla.org/en/docs/DOM:element">HTML
                              element</a> being added as a target. If you
                              don't specify a drag ID, the drag library
                              uses the HTML element's DOM ID as the drag
                              ID.</td>

                  </tr>
                  <tr>
                      <td><code>addTarget(drag_id, HTML_element)</code></td>
                      <td>Adds <code>HTML_element</code> as a target to the <code>drag</code> object.
                          Assigns the target a <code>drag_id</code>. </td>

                  </tr>
                  <tr>
                      <td><code>addTarget(drag_id, HTML_element, priority)</code></td>
                      <td>Adds <code>HTML_element</code> as a target to the <code>drag</code> object.
                          Assigns the target a <code>drag_id</code>. The <code>priority</code> parameter
                          is a numeric value that specifies the priority
                          if there are overlapping targets. Targets with
                          higher priorities get selected in case of conflict.
                          By default, a target's priority is 0. If two
                          targets are "hittable," the one with
                          the numerically higher priority is hit. For example,
                          a target with a priority of 4 would take precedence
                      over a target with a priority of 2.</td>

                  </tr>
                  <tr>
                      <td><code>removeTarget(drag_id)</code></td>
                      <td>Removes the target specified by <code>drag_id</code>. </td>
                  </tr>
                  <tr>
                      <td><code>removeAllTargets()</code></td>

                      <td>Removes all targets from the <code>drag</code> object.</td>
                  </tr>
              </tbody></table>
              <h5>Drag Properties </h5>
              <p>The <code>drag</code> library includes the properties listed below.
                      You access these properties through a <code>drag</code> object. For
                      example:</p>

              <pre>if (drag_obj.isDragging == true) {
     // do something
} </pre>
              <p>This table lists read-only properties: </p>
              <table>
                  <tbody><tr>
                      <th>Read-Only Property</th>
                      <th>Description</th>
                  </tr>

                  <tr>
                      <td><code>isDragging</code></td>
                      <td>True if the user is dragging. </td>
                  </tr>
                  <tr>
                      <td><code>hasDragged</code></td>
                      <td>True if is <code>isDragging</code> is true and the user has
                          moved the mouse since the last mouseDown.</td>

                  </tr>
                  <tr>
                      <td><code>surrogate</code></td>
                      <td>Points to the current surrogate.</td>
                  </tr>
                  <tr>
                      <td><code>surrogateInitialX, surrogateInitialY </code></td>

                      <td>Where the surrogate started out at the start
                          of the drag.</td>
                  </tr>
                  <tr>
                      <td><code>curSource</code></td>
                      <td>Points to the current source. Is null if the
                          user is not dragging. </td>
                  </tr>
                  <tr>

                      <td><code>curTargetId</code></td>
                      <td>Contains the ID of the current target. Is
                              null if the user is not dragging.</td>
                  </tr>
              </tbody></table>
              <p>This table lists read-write properties. Changing these
                  properties affects how dragging works. Do not change
                  them during dragging: </p>
              <table>
                  <tbody><tr>

                      <th>Read-Write Property</th>
                      <th>Description</th>
                  </tr>
                  <tr>
                      <td><code>leftMargin, rightMargin, topMargin, bottomMargin</code></td>
                      <td>Each target has a margin around it. You can change
                          how sensitive the targets are by changing this
                          value. By default the margin is 2 pixels. </td>
                  </tr>

                  <tr>
                      <td><code>surrogateOffsetX, surrogateOffsetY</code></td>
                      <td>You can change these values to have the surrogate
                          be a few pixels offset when the drag starts.
                          The default value is 1 pixel. It's not 0 because
                          a value of 1 ensures that the user gets feedback
                          when dragging starts.</td>
                  </tr>
              </tbody></table>
			  <h4><a name="Ref_Grid" id="Ref_Grid"></a>grid Library</h4>
			  <p>For a detailed discussion of using the <code>grid</code> library
			      and examples, see <a href="http://code.google.com/apis/gadgets/docs/legacy/ui.html#Grid">Grid</a>.</p>
			  <p>To use the <code>grid</code> library,
			      gadgets must include the following line under <code>&lt;ModulePrefs&gt;</code>:</p>
			  

			  <pre>&lt;Require feature="grid" /&gt; </pre>
			  
              <p>The functions in the <code>grid</code> library
                  are summarized below.</p>
              <h5>Grid Required Backend Functions</h5>
              <p>As part of using the grid library, you must implement the following
    backend functions:</p>
<table>
    <tbody><tr>
        <th>Function</th>
        <th>Description</th>
    </tr>
    <tr>
        <td><code>_IGG_getNormalView(index) </code></td>

        <td>Returns the default HTML content of the cell at <code>index</code> to
            be displayed when the user is not dragging. </td>
    </tr>
    <tr>
        <td><code>_IGG_isDragSource(index) </code></td>
        <td>Returns a boolean value to indicate whether the element at
            <code>index</code> is a drag source.</td>

    </tr>
    <tr>
        <td><code>_IGG_isDragTarget(index, sourceIndex)</code></td>
        <td>Returns a boolean value to indicate whether the element at
            <code>index</code> is a drag target when <code>sourceIndex</code> is
            a drag source. </td>
    </tr>

</tbody></table>

              <h5>Grid Backend Display Functions </h5>
              <p>By default, the grid library calls 
    <code>getNormalView()</code> whenever it wants to display the contents
    of a cell. However, you may want the contents of a cell to react and
    be displayed differently based on how the user is dragging. For those
    cases, you can implement the following optional functions for your
    backend object. </p>
<table>
    <tbody><tr>
        <th>Function</th>

        <th>Description</th>
    </tr>
    <tr>
        <td><code>_IGG_getSurrogateView(index) </code></td>
        <td>Returns the HTML content of the surrogate view (visible under
            the mouse cursor) when the content at <code>index</code> is
            being dragged. </td>
    </tr>

    <tr>
        <td><code>_IGG_getSourceView(source, target)</code></td>
        <td>Returns the HTML contents of the cell that is the <code>source</code>            when
            the user is dragging. If the mouse cursor is over a target,
            then <code>target</code>  contains the index of the target;
            otherwise, it contains -1. </td>
    </tr>
    <tr>

        <td><code>_IGG_getTargetView(target, source)</code></td>
        <td>Returns the HTML content of the cell when it is the <code>target</code>            and the user is dragging. The <code>source</code> is the index of the
            source. </td>
    </tr>
    <tr>
        <td><code>_IGG_getPossibleTargetView(potential_target, source) </code></td>

        <td>Returns the HTML content of the cell when it is a <code>potential_target</code>            (but not the target) and the user is dragging. The <code>source</code> is
            the index of the source. </td>
    </tr>
    <tr>
        <td><code>_IGG_getDragView(index, source) </code></td>
        <td>Returns the HTML content of the cell at <code>index</code> when
            it is neither a potential target nor the source, and the user
            is dragging. The <code>source</code> is
            the index of the source. </td>

    </tr>
</tbody></table>

<h5>Grid Backend Reaction Functions </h5>
<p>The grid library provides the following functions to let your gadget
    respond to mouse clicking and dragging: </p>
<table>
    <tbody><tr>
        <th>Function</th>
        <th>Description</th>

    </tr>
    <tr>
        <td><code>_IGG_handleClick(source) </code></td>
        <td>Called when the user has clicked the <code>source</code> (that is, when
            the user has performed a mouseDown and mouseUp without dragging
            the mouse). </td>
    </tr>
    <tr>

        <td><code>_IGG_handleDragStart(source) </code></td>
        <td>Called when the user has done a mouseDown on the <code>source</code>            and
            has started the drag process. </td>
    </tr>
    <tr>
        <td><code>_IGG_handleDrag(source, target) </code></td>
        <td>Called when the user has finished dragging. If the
            user ended on a valid target, then <code>target</code>  contains
            the target's index. Otherwise, it has the value -1. <br>

Note that if <code>_IGG_handleClick()</code> is called,<code> _IGG_handleDrag()</code> is called
too. So, depending on the application, it may make more sense to just use
<code>_IGG_handleDrag()</code>. </td>
    </tr>
</tbody></table>
<h5>Grid Backend Callbacks </h5>
<p>Backend callback functions are  automatically created in your
    backend object. The grid library calls them as necessary, but you can
    also call them yourself, such as when your data is changing through
    a processes other than user dragging. The grid library includes the
    following backend callbacks: </p>

<table>
    <tbody><tr>
        <th>Function</th>
        <th>Description</th>
    </tr>
    <tr>
        <td><code>_IGG_refreshCell(index)</code></td>
        <td>Refreshes the display of the cell at <code>index</code>. </td>

    </tr>
    <tr>
        <td><code>_IGG_refreshAll()</code></td>
        <td>Refreshes the display of all cells. Note that this can be a
            time-consuming operation, particularly if you have a large,
            complex grid. </td>
    </tr>
</tbody></table>
<h5>Grid Object Properties</h5>
<p>The grid library includes the grid object fields and functions listed
    below. You access these through a grid object. For example:</p>

<pre>document.getElementById("summary").innerHTML = "In the grid " + mygrid.name + 
   " the HTML content of the source is " + mygrid.getCellValue(mygrid.source);
</pre>
<p>The fields and functions you can access through a grid object are as
    follows:</p>
 
 <table>
     <tbody><tr>

         <th scope="col" width="195">Function</th>
         <th scope="col" width="778">Description</th>
     </tr>
     <tr>
         <td><code>initDragging() </code></td>
         <td>Makes the grid sensitive to dragging.</td>
     </tr>

     <tr>
         <td><code>dataObject </code></td>
         <td>The backend object.</td>
     </tr>
     <tr>
         <td><code>name </code></td>
         <td>The prefix string prepended to all DOM ids made by the grid.</td>

     </tr>
     <tr>
         <td><code>height, width </code><br></td>
         <td>The grid's height and width parameters.</td>
     </tr>
     <tr>
         <td><code>maxIndex </code></td>

         <td>The largest index value of any cell. This is usually height*width-1,
             but it can be a higher number if you create extra cells using
             <code>getCell()</code>.</td>
     </tr>
     <tr>
         <td><code>source </code></td>
         <td>The index of the current source. The value is -1 if the user
             is not dragging. </td>
     </tr>

     <tr>
         <td><code>target </code></td>
         <td>The index of the current target. The value is -1 if the user
             is not dragging or is not over a target.</td>
     </tr>
     <tr>
         <td><code>getCellName(index)</code></td>
         <td>Returns the DOM ID of the SPAN element containing the contents
             of the cell at <code>index</code>.</td>

     </tr>
     <tr>
         <td><code>getCellTDID(index)</code></td>
         <td>Returns the DOM ID of the TD element containing the SPAN element
             that contains the contents of the cell at <code>index</code>. </td>
     </tr>
     <tr>
         <td><code>getCellValue(index)</code></td>

         <td>Returns the HTML content of the  cell at <code>index</code>.</td>
     </tr>
     <tr>
         <td><code>getTable()</code></td>
         <td>Returns the DOM table that contains the cell.</td>
     </tr>

     <tr>
         <td><code>getCell(index) </code></td>
         <td>Returns the cell AT <code>index</code>. If index &lt; 0,
             returns null. If index &gt; maxIndex, a new cell is created
             with that index. This allows you to have cells that are not
             in the table.</td>
     </tr>
     <tr>

         <td><code>makeNewTable()</code></td>
         <td>Completely rebuilds the DOM HTML table. Note that you may
             have to reattach the new table to your DOM tree, and that
             this may slow down your page as the old table probably needs
             to be garbage-collected.</td>
     </tr>
     <tr>
         <td><code>table </code></td>
         <td>Direct access to the DOM HTML table. You'll probably want
             to use getTable() instead of changing this. </td>
     </tr>

     <tr>
         <td><code>cells </code></td>
         <td>A direct access to the array containing DOM cells. You'll
             probably want to use <code>getCell()</code> instead of changing this.</td>
     </tr>
     <tr>
         <td><c><code>dragHandler </code></c></td>

         <td>The <code>_IG_Drag</code> object (see <a href="#Ref_Drag">drag
                 Library</a>) for managing
             this grid's dragging. </td>
     </tr>
     <tr>
         <td><code>setXMapper, setYMapper</code></td>
         <td>Changes the mappers in the internal <code>_IG_Drag</code> object.</td>

     </tr>
     <tr>
         <td><code>isRightButton</code></td>
         <td>Returns <code>true</code> if the user used the right button on the last
             drag.</td>
     </tr>
     <tr>

         <td><code>refreshCell(index)</code></td>
         <td>Refreshes the cell at <code>index</code>. This is equivalent to using the
             <code>_IGG_refreshCell()</code> callback.</td>
     </tr>
     <tr>
         <td><code>refreshAll()</code></td>

         <td>Refreshes all cells. This is equivalent to using the
             <code>_IGG_refreshAll()</code> callback.</td>
     </tr>
     <tr>
         <td><code>refreshDragSources()</code></td>
         <td>Forces a recalculation of all cells to see which ones are
             sources and registers them with the underlying Drag object.</td>
     </tr>

     <tr>
         <td><code>refreshDragTargets(sourceIndex)</code></td>
         <td>Refreshes all cells that are targets of source at <code>sourceIndex</code>.
             Note that this doesn't register the targets with the underlying
             Drag object.</td>
     </tr>
     <tr>
         <td><code>refreshDragNonTargets(sourceIndex)</code></td>

         <td>Refreshes all cells that are not targets of the 
             source at <code>sourceIndex</code>.</td>
     </tr>
     <tr>
         <td><code>addDragSource(index)</code></td>
         <td>Adds a cell to be a valid source (even if <code>isDragSource</code> had
             returned <code>false</code>).</td>

     </tr>
     <tr>
         <td><code>removeDragSource(index)</code></td>
         <td>Removes a cell as a valid source (even if <code>isDragSource</code> had
             returned <code>true</code>).</td>
     </tr>

     <tr>
         <td><code>removeDragSource(index)</code></td>
         <td>Removes a cell as a valid source (even if <code>isDragSource</code> had
             returned <code>true</code>).</td>
     </tr>
     <tr>

         <td><code>calculateDragTargets(sourceIndex)</code></td>
         <td>Registers all targets of the  source at <code>sourceIndex</code> with the
             underlying Drag object.</td>
     </tr>
 </tbody></table>
 <h5>Advanced Backend Functions </h5>
 <p>If you override the <code>dragHandler</code> in the Grid object,
			      sometimes the user will drag something that the Grid
			      can't handle. In that case, it will attempt to call these
			      functions in your backend object if they exist. See <a href="#Ref_Drag">drag
		      Library</a> for details on how they work. </p>
			  <ul>
			      <li><code>_IGG_handleOnDragStart(object) </code></li>
                  <li> <code> _IGG_handleOnDragTargetHit(object) </code></li>

                  <li><code> _IGG_handleOnDragTargetLost() </code></li>
	              <li><code> _IGG_handleOnDragEnd(object, object) </code></li>
	              <li><code> _IGG_handleOnDragClick(object) </code></li>
	    </ul>
			  <h4><a name="Ref_Mini" id="Ref_Mini"></a>MiniMessage Library</h4>
			  <p>For a detailed discussion of using the MiniMessage library and
                examples, see <a href="http://code.google.com/apis/gadgets/docs/legacy/ui.html#Mini">MiniMessages</a>.</p>
              <p>To use the MiniMessage library, gadgets must include the
                following line under <code>&lt;ModulePrefs&gt;</code>:</p>
              <pre>&lt;Require feature="minimessage" /&gt; </pre>

              <p>This table lists the MiniMessage constructor, and the
                  functions you can call on a MiniMessage object once you
                have instantiated it:</p>
              <table>
                  <tbody><tr>
                      <th>Function</th>
                      <th>Description</th>

                  </tr>
                  <tr>
                      <td><code>_IG_MiniMessage(moduleId,
                          opt_container) </code></td>
                      <td>The <code>MiniMessage</code> constructor.
                          Instantiates a new <code>MiniMessage</code> object. Takes
                          the               
                           <code>__MODULE_ID__</code> of
                           the gadget as a parameter. The constructor 
                           optionally takes an <code>opt_container</code> parameter,
                           which specifies an HTML element
                           (typically a <code>&lt;div&gt;</code>)
                           where messages are appended. If <code>opt_container</code> is
                           omitted, a default message container is auto-generated
                           and placed at the  top of the gadget. <br>

                              <br>
                              For example:
                          <br><br>
                      <code>var
                      mini = new _IG_MiniMessage(__MODULE_ID__, _gel("messageContainer")); </code></td>
                  </tr>
                  
                  <tr>
                      <td><code>createDismissibleMessage(msg,
                              opt_callback) </code></td>

                      <td>Creates a dismissible message.
                          The parameter
                          <code>msg</code> is an HTML
                          string or element. The message is displayed with
                          a clickable [x] link that allows the user to
                          dismiss the message. When the message is dismissed,
                          it is removed from the DOM, and the optional
                          callback function <code>opt_callback</code> is
                          called. If the callback returns
                          false, dismissal is cancelled.  
                          <br>
                          <br>
                          For example:  <br><br>
                          <code>mini.createDismissibleMessage("Loading message"); <br>

                      mini.createDismissibleMessage(_gel("loading")); </code></td>
                  </tr>
                  <tr>
                      <td><code>createTimerMessage(msg,
                              seconds, opt_callback) </code></td>
                      <td>Creates a timed message that
                          displays for the specified number of <code>seconds</code>.
                          The parameter
                          <code>msg</code> is an HTML
                          string or element. When the timer expires, the
                          message initiates the dismissal procedure where
                          the optional callback function <code>opt_callback</code> executes.
                          If the callback returns false, dismissal is cancelled.  
                          <br>

                              <br>
                              For example:
                          <br>
                          <code>mini.createTimerMessage("Your account has
                      been updated.", 5);</code></td>
                  </tr>
                  <tr>

                      <td><code>createStaticMessage(msg) </code></td>
                      <td>Creates a static message that
                          displays until it is programmatically dismissed
                          by <code>dismissMessage(msg)</code>. The
                          parameter
                          <code>msg</code> is an HTML
                          string or element.<br>
                              <br>
                              For example:
                          <br> <br>

                          <code>var loadMsg
                          = mini.createStaticMessage("Loading
                      content..."); </code></td>
                  </tr>
                  <tr>
                      <td><code>dismissMessage(msg) </code></td>
                      <td>Dismisses the specified message
                          <code>msg</code>. This function
                          is the only way to dismiss a static message. <br>

                          <br>
                              For example: <br>
                          <br>
                          
                          <code>var loadMsg
                          = mini.createStaticMessage("Loading
                          content..."); <br>
                      mini.dismissMessage(loadMsg); </code></td>
                  </tr>

              </tbody></table>
              <h4><a name="Ref_Analytics" id="Ref_Analytics"></a>analytics  Library</h4>
              <p>For a detailed discussion of using the <code>analytics</code> library
                  and examples, see <a href="http://code.google.com/apis/gadgets/docs/legacy/tools.html#Analytics">Using
                  Analytics</a>.</p>
              <p>To use the <code>analytics</code> library, gadgets must include the
                  following line under <code>&lt;ModulePrefs&gt;</code>:</p>

              <pre>&lt;Require feature="analytics" /&gt; </pre>
              <p>The <code>analytics</code> library includes the following function:</p>
              <table>
                  <tbody><tr>

                      <th scope="col" width="18%">Function</th>
                      <th scope="col">Description</th>
                  </tr>
                  <tr>
                      <td><code>_IG_Analytics(id, path)</code></td>
                      <td>Records a single page view to a single Google
                              Analytics account. Supports multiple calls
                              within a single gadget. <br>
                              <br>

                          The <code>id</code> parameter
                          is a Google Analytics account ID. <br>
                              <br>
                              The <code>path</code> parameter
                              is the virtual page view path that is recorded
                              back to Google Analytics for each call. Set
                              this to a unique name so you can identify
                              the page view hits for different gadgets
                              within your analytics reports.<br>

                              <br>
                          For example: <br><br>
                          <code>_IG_Analytics("UA_000000-0", "/weathergadget");</code>                          
                          
                    </td>
                  </tr>

        </tbody></table>
		
        <h4><a name="Ref_Flash" id="Ref_Flash"></a>flash Library</h4>
		      <p>For a detailed discussion of using the <code>flash</code> library
	    and examples, see <a href="http://code.google.com/apis/gadgets/docs/legacy/ui.html#Flash">Flash</a>.</p>
		<p>To use the <code>flash</code> library,
	    gadgets must include the following line under <code>&lt;ModulePrefs&gt;</code>:</p>

		
		<pre>&lt;Require feature="flash" /&gt; </pre>
		
		<p>The <code>flash</code> library includes the following functions:</p>

<table border="0" width="1119">
    <tbody><tr>
        <th scope="col" width="272">Function</th>
        <th scope="col" width="835">Description</th>
    </tr>
    <tr>
        <td><code>_IG_EmbedFlash(swf_url, swf_container, opt_params)</code></td>
        <td>Embeds the <code>.swf </code>file specified by <code>swf_url</code>, and
            displays it in the gadget at the location specified by <code>swf_container</code>.
            The parameter <code>opt_params</code> is an object that optionally includes
                the following:<br>

				<ul>
            <li><code>.swf_version : numeric | string (default = 0)</code> Minimal
                Flash Player version required. </li>
                <li><code>.width, .height : numeric | string</code> (default
                    = "100%").
                Preferred width and height.</li>

                <li>You can also define other fields such as <code>.quality</code>                    and <code>.id</code> and
                    pass them to the Flash movie on creation. </li>
		  </ul>
                <br>
                <code>_IG_EmbedFlash()</code> returns <code>true</code> if
                successful, or <code>false</code> if not. 
				<br><br>

				<strong>Note:</strong> If you experience
                performance problems or if the caret does not display (sometimes
                an issue in Firefox 2.0), try explicitly setting <code>wmode</code> to <code>"window"</code> as follows: <code>_IG_EmbedFlash("example.swf", "wrapper",
                {wmode: "window"}); </code></td>

    </tr>
    <tr>
        <td><code>_IG_GetFlashMajorVersion()</code></td>
        <td> Returns the Flash Player's
            major version or zero if Flash Player is not detected. </td>
    </tr>
</tbody></table>
<h4><a name="Ref_Finance" id="Ref_Finance"></a>finance Library</h4>
<p>For a detailed discussion of using the <code>finance</code> library
    and examples, see <a href="http://code.google.com/apis/gadgets/docs/legacy/finance.html">Financial Gadgets</a>. </p>

<p>To use the <code>finance</code> library,
		    gadgets must include the following line under <code>&lt;ModulePrefs&gt;</code>: </p>
		
        <pre>&lt;Require feature="finance" /&gt; </pre>
        

		<p>This table lists the JavaScript functions in the Finance Market Data
		    API:</p>
        <table class="reftable" border="1" cellpadding="4" cellspacing="2">
            <tbody>
                <tr class="h">
                    <th width="252">Function</th>
                    <th width="383">Description</th>
                </tr>

                <tr>
                    <td><code>getQuotes(symbol)</code></td>
                    <td>Retrieves stock quotes for the given symbol, then
                        calls any listener functions you have previously
                        specified. The <code>symbol</code> argument is
                        a string that names the desired stock symbol.
                        
                        If you have previously called <code>enableDomUpdates</code>,
                        the quotes are inserted into your HTML.
                        <p>Example: <code>quote.getQuotes("GOOG");</code></p></td>

                </tr>
                <tr>
                    <td><code>getQuotes(array of symbols)</code></td>
                    <td>Retrieves stock quotes for all the given symbols,
                        then calls any listener functions you have previously
                        specified. Each element in the array is a string
                        that names a desired stock symbol.
                        
                        If you have previously called <code>enableDomUpdates</code>,
                        the quotes are inserted into your HTML.
                        <p>Example: <code>quote.getQuotes(["GOOG", "AAPL", "GMGC"]);</code></p></td>

                </tr>
                <tr>
                    <td><code>enableDomUpdates(symbolMap)</code></td>
                    <td>Associates stock symbols with the <code>span</code> tags
                        where you want the quote to appear.
                        <p>Example: <code>quote.enableDomUpdates( { 'GOOG'
                                : 'g', 'MSFT' : 'm' } )</code></p></td>
                </tr>

                <tr>
                    <td><code>addListener(function(data))</code></td>
                    <td>Specifies a function that will be called whenever
                        your gadget calls <code>getQuotes()</code>. To
                        find out how to access quote data in this function,
                        see <a href="http://code.google.com/apis/gadgets/docs/legacy/finance.html#Raw_Data">Accessing Data Directly</a><a href="http://code.google.com/apis/gadgets/docs/legacy/finance.html#accessing_quote_data"></a>. You can call <code>addListener</code> repeatedly
                        to have more than one of your functions called
                        when quotes are retrieved.</td>
                </tr>

            </tbody>
        </table>
        <p>All these functions are defined by the <code>quote</code> object
            you create. So, for example, you call <code>getQuotes</code> by
            writing <code>quote.getQuotes</code>. </p>
        <p>The Finance Market Data API supports the following <a href="http://code.google.com/apis/gadgets/docs/legacy/finance.html#span_ids">suffix
        codes</a>, which you use in conjunction with HTML <code>&lt;span&gt;</code> tags
        to display stock quote information: </p>

        <table class="reftable" border="1" cellpadding="4" cellspacing="2">
            <tbody>
                <tr class="h">
                    <th>Suffix for <code>span</code> ID</th>
                    <th>Quote returned</th>
                </tr>

                <tr>
                    <td><div align="center"><code>_l</code></div></td>
                    <td>Last price traded</td>
                </tr>
                <tr>
                    <td><div align="center"><code>_c</code></div></td>
                    <td>Change since close</td>

                </tr>
                <tr>
                    <td><div align="center"><code>_cp</code></div></td>
                    <td>Change percentage</td>
                </tr>
                <tr>
                    <td><div align="center"><code>_vo</code></div></td>

                    <td>Volume</td>
                </tr>
                <tr>
                    <td><div align="center"><code>_e</code></div></td>
                    <td>Stock exchange (NYSE, AMEX, or NASDAQ)</td>
                </tr>
                <tr>

                    <td><div align="center"><code>_s</code></div></td>
                    <td>Symbol</td>
                </tr>
                <tr>
                    <td><div align="center"><code>_t</code></div></td>
                    <td>Ticker</td>
                </tr>

                <tr>
                    <td><div align="center"><code>_op</code></div></td>
                    <td>Open</td>
                </tr>
                <tr>
                    <td><div align="center"><code>_hi</code></div></td>
                    <td>Highest price today (intraday high)</td>

                </tr>
                <tr>
                    <td><div align="center"><code>_lo</code></div></td>
                    <td>Lowest price today (intraday low)</td>
                </tr>
                <tr>
                    <td><div align="center"><code>_lt</code></div></td>

                    <td>Last trade date and time</td>
                </tr>
                <tr>
                    <td><div align="center"><code>_el</code></div></td>
                    <td>Last price (extended hours)</td>
                </tr>
                <tr>

                    <td><div align="center"><code>_evo</code></div></td>
                    <td>Volume (extended hours)</td>
                </tr>
                <tr>
                    <td><div align="center"><code>_ec</code></div></td>
                    <td>Change (extended hours)</td>
                </tr>

                <tr>
                    <td><div align="center"><code>_ecp</code></div></td>
                    <td>Change percentage (extended hours)</td>
                </tr>
                <tr>
                    <td><div align="center"><code>_elt</code></div></td>
                    <td>Last trade time (extended hours)</td>

                </tr>
            </tbody>
        </table>
        <p>So, for example, to create a placeholder for the intraday high
            value for a stock, you would use HTML like this, with the <code>_hi</code> suffix:</p>
        <p><code>&lt;span id=_IG_SYM1_hi&gt;&lt;/span&gt;</code></p>
        <p>The following table lists the objects you can use to  access
            the quote data through the <code>google.finance</code> object:</p>

        <table class="reftable" border="1" cellpadding="4" cellspacing="2">
      <tbody>
        <tr class="h">
          <th width="172"><code>google.finance</code> object</th>
          <th width="188">Quote returned</th>
        </tr>
        <tr>

          <td><div align="center"><code>LAST</code></div></td>
          <td>Last price traded</td>
        </tr>
        <tr>
          <td><div align="center"><code>CHANGE</code></div></td>
          <td>Change since close</td>
        </tr>

        <tr>
          <td><div align="center"><code>CHANGE_PCT</code></div></td>
          <td>Change percentage</td>
        </tr>
        <tr>
          <td><div align="center"><code>VOLUME</code></div></td>
          <td>Volume</td>

        </tr>
        <tr>
          <td><div align="center"><code>EXCHANGE</code></div></td>
          <td>The stock's stock exchange (NYSE, AMEX, or NASDAQ)</td>
        </tr>
        <tr>
          <td><div align="center"><code>SYMBOL</code></div></td>

          <td>The stock's symbol</td>
        </tr>
        <tr>
          <td><div align="center"><code>TICKER</code></div></td>
          <td>Ticker</td>
        </tr>
        <tr>

          <td><div align="center"><code>OPEN</code></div></td>
          <td>Open</td>
        </tr>
        <tr>
          <td><div align="center"><code>HIGH</code></div></td>
          <td>Highest price today (intraday high)</td>
        </tr>

        <tr>
          <td><div align="center"><code>LOW</code></div></td>
          <td>Lowest price today (intraday low)</td>
        </tr>
        <tr>
          <td><div align="center"><code>LAST_TRADE_TIME</code></div></td>
          <td>Last trade time</td>

        </tr>
        <tr>
          <td><div align="center"><code>LAST_TRADE_DATE</code></div></td>
          <td>Last trade date</td>
        </tr>
        <tr>
          <td><div align="center"><code>LAST_TRADE_DATETIME</code></div></td>

          <td>Last trade date and time</td>
        </tr>
        <tr>
          <td><div align="center"><code>EXT_LAST</code></div></td>
          <td>Last price (extended hours)</td>
        </tr>
        <tr>

          <td><div align="center"><code>EXT_VOLUME</code></div></td>
          <td>Volume (extended hours)</td>
        </tr>
        <tr>
          <td><div align="center"><code>EXT_CHANGE</code></div></td>
          <td>Change (extended hours)</td>
        </tr>

        <tr>
          <td><div align="center"><code>EXT_CHANGE_PCT</code></div></td>
          <td>Change percentage (extended hours)</td>
        </tr>
        <tr>
          <td><div align="center"><code>EXT_LAST_TRADE_TIME</code></div></td>
          <td>Last trade time (extended hours)</td>

        </tr>
      </tbody>
    </table>
    <p>So, for example, you can access the stock's opening price by writing <code>google.finance.OPEN</code>.</p>
    <a name="lockeddomain" id="lockeddomain"></a>
    <h4>locked-domain Library</h4>
    <p>The <code>locked-domain</code> library  isolates your gadgets from other gadgets running on the same   page. You can only use this feature with <code>type="html"</code> gadgets. </p>
    <p>To use the <code>locked-domain</code> library, gadgets must include the   following line under <code>&lt;ModulePrefs&gt;</code>:</p>
    <pre>&lt;Require feature="locked-domain"/&gt;</pre>
    <p>
We suggest that you add this feature requirement to your gadget if your
gadget stores sensitive private user data. This feature is only
supported on iGoogle. Other gadget containers may not support this
feature and will reject your gadget.</p>
    <h2><a name="RequestParams_Ref" id="RequestParams_Ref"></a>Request
                  Parameters </h2>
    <p>When the gadget URL is requested from iGoogle, parameters
                  are appended to the request, which is a GET method. This
                  only applies when your content type is set to <code>"url"</code>--see <a href="http://code.google.com/apis/gadgets/docs/legacy/fundamentals.html#URL">URL</a> for
                  more information. These parameters can be read by a gadget
                  using JavaScript, or by a server-side web application.
                  For an example, see <a href="http://code.google.com/apis/gadgets/docs/legacy/fundamentals.html#URL">URL</a>.</p>

              <p>The parameters that are passed are listed in the following
                  table:</p>
              <table>
                  <tbody><tr>
                      <th>Name</th>
                      <th>Description</th>
                  </tr>
                  <tr>

                      <td><code>up_&lt;name&gt;</code></td>
                      <td>A user preference and its value. For each of
                          the user preferences, the name-value pair are
                          passed as parameters using the following format: <br>
                          <code>&amp;up_&lt;name&gt;=&lt;value&gt;</code> <br>
                          For example, suppose you had a zip code parameter
                          called <code>zp</code>, and a user assigned it a value of
                          94306. It would be passed in the URL as follows: <br>

                          <code>&amp;up_zp=94306</code></td>
                  </tr>
                  <tr>
                      <td><code>lang </code></td>
                      <td>The user's language preference (set in the browser). </td>
                  </tr>
                  <tr>

                      <td><code>country</code></td>
                      <td>The user's home country (defined in the user's
                          Google account).</td>
                  </tr>
              </tbody></table>
              <p class="backtotop"><a href="#top">Back to top</a></p>

   
      <div class="" style="height: 17416px;" id="gc-collapsible"></div></div><!-- end gc-pagecontent -->
   </div><!-- end gooey wrapper -->

    </div> <!-- end codesite content -->

<div id="gc-footer" dir="ltr"> 
  <div class="text">
    
    ©2008 Google -
    <a href="http://code.google.com/">Code Home</a> -
    <a href="http://www.google.com/accounts/TOS">Site Terms of Service</a> -
    <a href="http://www.google.com/privacy.html">Privacy Policy</a> -
    <a href="http://code.google.com/more/">Site Directory</a>
     <br>
     <br>
    Google Code offered in:  
    <a href="http://code.google.com/intl/zh-CN/">中文</a> - 
    <a href="http://code.google.com/">English</a> - 
    <a href="http://code.google.com/intl/pt-BR/">Português</a> - 
    <a href="http://code.google.com/intl/ru/">Pусский</a> - 
    <a href="http://code.google.com/intl/es/">Español</a> - 
    <a href="http://code.google.com/intl/ja/">日本語</a> </div><!-- end gc-footer -->
  </div>
</div><!-- end gc-containter -->
<script src="GoogleGadget_reference_files/ga.js" type="text/javascript">
</script>
<script type="text/javascript">
  try {
    var pageTracker = _gat._getTracker("UA-18071-1");
    pageTracker._setAllowAnchor(true);
    pageTracker._initData();
    pageTracker._trackPageview(); 
  } catch(e) {}
</script>




  <select size="6" style="position: absolute; display: none;" class="fauxSelect"><option value="zh-CN">中文 (简体)</option><option value="en">English</option><option value="pt-BR">Português (Brasil)</option><option value="ru">Pусский</option><option value="es">Español</option><option value="ja">日本語</option></select><div style="display: none; left: 223px; top: 2170px;" class="" id="gc-collapsible-arrow"></div><div id="cs-searchresults"><div id="cs-recommended">Suggestions</div><div id="searchResult1"></div><div id="searchResult2"></div><div id="searchResult3"></div><div id="searchResult4"></div><div id="searchResult5"></div><div id="searchResult6"></div><div id="searchResult7"></div></div></body></html>